<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温馨提示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 100vh;
            overflow: hidden;
            background-color: #f8f8f8;
        }
        
        /* 提示窗口样式 */
        .tip-window {
            position: absolute;
            width: 250px;
            height: 60px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "微软雅黑", "SimHei", sans-serif;
            font-size: 16px;
            z-index: 1000;
        }
        
        /* 控制按钮 */
        .control-panel {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2000;
        }
        
        #startBtn {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        
        #startBtn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <!-- 控制按钮 -->
    <div class="control-panel">
        <button id="startBtn">开始显示提示</button>
    </div>

    <script>
        // 提示文字列表（与Python代码完全一致）
        const tips = [
           '多喝水哦~', '保持微笑呀', '每天都要元气满满', '记得吃水果', '保持好心情', '好好爱自己', '我想你了',
            '梦想成真', '期待下一次见面', '天冷了，多穿衣服', '愿所有烦恼都消失', '保持微笑呀', '别熬夜',
            '想我我就回去见你', '我想一直和你在一起', '有我呢', '没有我的日子你会想我吗', '羊羊我爱你', '你是我的礼物', '我一直在'
        ];
        
        // 背景颜色列表（与Python代码完全一致）
        const bgColors = [
            'lightpink', 'skyblue', 'lightgreen', 'lavender', 'lightyellow', 
            'plum', 'coral', 'bisque', 'aquamarine', 'mistyrose', 'honeydew'
        ];
        
        let isRunning = false;
        
        // 创建单个提示窗口
        function createTipWindow() {
            if (!isRunning) return;
            
            // 创建窗口元素
            const div = document.createElement('div');
            div.className = 'tip-window';
            
            // 随机选择提示文字和背景色
            const tip = tips[Math.floor(Math.random() * tips.length)];
            const bgColor = bgColors[Math.floor(Math.random() * bgColors.length)];
            
            // 设置内容和样式
            div.textContent = tip;
            div.style.backgroundColor = bgColor;
            
            // 随机位置（确保窗口完全显示在屏幕内）
            const maxX = window.innerWidth - 250;
            const maxY = window.innerHeight - 60;
            const x = Math.floor(Math.random() * maxX);
            const y = Math.floor(Math.random() * maxY);
            div.style.left = `${x}px`;
            div.style.top = `${y}px`;
            
            // 添加到页面
            document.body.appendChild(div);
            
            // 5秒后自动关闭（与Python代码一致）
            setTimeout(() => {
                if (document.body.contains(div)) {
                    div.remove();
                }
            }, 10000);
        }
        
        // 批量创建窗口（模拟线程效果）
        function startShowingTips() {
            if (isRunning) return;
            
            isRunning = true;
            const windowCount =250; // 窗口数量与Python代码一致
            const interval = 50; // 间隔时间（0.05秒）与Python代码一致
            
            for (let i = 0; i < windowCount; i++) {
                setTimeout(createTipWindow, i * interval);
            }
            
            // 全部创建完成后重置状态
            setTimeout(() => {
                isRunning = false;
            }, windowCount * interval);
        }
        
        // 绑定按钮事件
        document.getElementById('startBtn').addEventListener('click', startShowingTips);
    </script>
</body>
</html>